<template>
  <div class="w-full h-full" ref="getTopstyle">
    <span v-for="(item, index) in tagsList" :key="item.pyDfdId">
      <span
        class="text-[8px] text-[red] absolute"
        v-show="imgInfo.id == item.pyDtkqtId"
        :style="styleList[index]"
      >
        {{ item.value }}
      </span>
    </span>
  </div>
</template>

<script lang="ts" setup>
import { watch, ref, onMounted, computed } from 'vue'

import { useGlobSetting } from '/@/hooks/setting'
const { imgUrl } = useGlobSetting()
const props = defineProps({
  imgInfo: {
    type: Object,
    deafult: () => {},
  },
  tagsList: {
    type: Array,
    default: () => [],
  },
} as any)
let styleList = ref([] as any)
const getTopstyle = ref()
let outWidth: any = computed(() => getTopstyle.value?.offsetWidth || 116)
let outHeight: any = computed(() => getTopstyle.value?.offsetHeight || 68)

watch(
  () => props.tagsList,
  val => {
    styleList.value = []
    if (!val?.length) return
    let img = new Image()
    img.src = imgUrl + props.imgInfo.fpurl
    img.onload = function () {
      for (let i = 0; i < val.length; i++) {
        styleList.value.push({
          top: (outHeight.value * val[i].y) / img.height + 'px',
          left: (outWidth.value * val[i].x) / img.width + 'px',
        })
      }
    }
  },
  { immediate: true, deep: true }
)
onMounted(() => {})
</script>
